// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, Alert, ImageBackground, ScrollView, TextInput, Picker, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import pureRender from 'pure-render-decorator';
import * as WeChat from 'react-native-wechat';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/dist/FontAwesome';


// antd 按需加载
import { Tabs, Toast, Modal, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import * as ActionTypes from '../../constants/constants.js'
import { login, globalCodeList } from './module/module.js'
import { getUserInfo, dashboard } from '../User/module/module.js'
import { getDefaultAddressList } from '../Address/module/module'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, Merchants, ImportantTitle, VipCard, Title } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { path, press, size, AppId, secret, ScreenWidth, ScreenHeight, saveData, validation } from '../../util/utils.js'

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      send: '获取验证码',
      code: '60',
      disable: false,
      checkSjh: null,
      checkSjhVisible: false,
      info: '',
    };
    this.login = login.bind(this)
    this.globalCodeList = globalCodeList.bind(this)
    this.getUserInfo = getUserInfo.bind(this)
    this.dashboard = dashboard.bind(this)
    this.getDefaultAddressList = getDefaultAddressList.bind(this)
  }

  componentDidMount() {
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    this.globalCodeList()
    // });
  }

  handleLogin() {
    const { dispatch } = this.props
    
    if (!this.phone._lastNativeText) {
      Toast.info(this.phone.props.placeholder, 1, null, false);
      return
    }
    
    if (!this.password._lastNativeText) {
      Toast.info(this.password.props.placeholder, 1, null, false);
      return
    }
    
    if (!validation.phone(this.phone._lastNativeText)) {
      Toast.info('请输入9-11位手机号', 1, null, false);
      return
    }
    
    this.login({
      phone: this.phone._lastNativeText,
      password: this.password._lastNativeText
    }).then(res => {
      console.log(res)
      dispatch({
        type: ActionTypes.auth,
        data: res.data
      })
      Portal.remove()
      this.getUserInfo()
      this.dashboard()
      this.getDefaultAddressList()
      saveData('authorization', res.data)
      Actions.user()
    })
  }

  render() {
    const { globalCodeList } = this.props
    const { code } = this.state
    return (
      <View style={[Style.container, { backgroundColor: '#fff' }]}>
        <Status />
        <NavBar
          title="登录"
          back={true}
        />
        <ScrollView style={{ flex: 1, }}>
          <View style={{
            marginTop: 30
          }}>
            <View style={{
              padding: size(30),
            }}
            >
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                borderBottomWidth: 1,
                borderBottomColor: '#ececee',
                marginTop: 30,
              }}
              >
                <Picker
                  selectedValue={code}
                  style={{ height: 50, width: 160 }}
                  itemStyle={{ fontSize: size(30) }}
                  onValueChange={(code) => this.setState({ code })}
                >
                  {globalCodeList.map((item, index) => {
                    return <Picker.Item key={index} itemStyle={{ fontSize: size(30) }} label={item.name} value={item.code} />
                  })}
                </Picker>
                <TextInput
                  ref={(r) => this.phone = r}
                  // autoFocus
                  keyboardType="numeric"
                  placeholder="请输入手机号"
                  placeholderTextColor="#c8c8ca"
                  style={{
                    flex: 1,
                    fontSize: 16,
                    paddingVertical: 16,
                    borderWidth: 0,
                    paddingHorizontal: 5,
                    color: '#3e3e3e',
                  }}
                  underlineColorAndroid="transparent"
                />
              </View>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                borderBottomWidth: 1,
                borderBottomColor: '#ececee',
              }}
              >
                <TextInput
                  ref={(r) => this.password = r}
                  placeholder="请输入密码"
                  placeholderTextColor="#c8c8ca"
                  secureTextEntry={true}
                  style={{
                    flex: 1,
                    fontSize: 16,
                    paddingVertical: 16,
                    borderWidth: 0,
                    paddingHorizontal: 5,
                    color: '#3e3e3e',
                  }}
                  underlineColorAndroid="transparent"
                />
                <TouchableOpacity
                  onPress={() => { Actions.resetPassword() }}
                >
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>忘记密码</Text>
                </TouchableOpacity>
              </View>
              <TouchableOpacity
                activeOpacity={0.9}
                onPress={() => {
                  this.handleLogin()
                }}
                style={{
                  marginTop: 40,
                  paddingVertical: 14,
                  paddingHorizontal: 20,
                  backgroundColor: '#f23030',
                  borderRadius: 23,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>登录</Text>
              </TouchableOpacity>
              <View style={{
                flexDirection: 'row',
                justifyContent: 'flex-end',
                alignItems: 'center',
                marginTop: 15
              }}>
                <TouchableOpacity
                  onPress={() => Actions.registered()}
                >
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>注册</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user, globalCodeList }) => ({
  user,
  globalCodeList
}))(pureRender(Login))
